<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 590px;
            height: 470px;
            margin: 0px auto;
            position: relative;
        }


        .slide {
            width: 590px;
            height: 470px;

            position: absolute;
            left: 0;
            top: 0;
            display: inline-block;

        }

        .slide span {
            position: absolute;
            left: 0;
            font-size: 30px;
            color: #fff;
        }

        .slide img {
            width: 590px;
            height: 470px;
        }

        .slide.active {
            z-index: 999;
        }

        .button-next,
        .button-prev {
            position: absolute;
            top: 50%;
            width: 25px;
            height: 35px;
            line-height: 35px;
            background-color: #d9d9d9;
            background-color: rgba(0, 0, 0, .15);
            margin-top: -20px;
            font-size: 20px;
            z-index: 999;
            transition: background-color .2s ease;
            border-radius: 0 20px 20px 0;
        }

        .button-next i,
        .button-prev i {
            position: relative;
            width: 100%;
            height: 100%;
            color: #fff;
            color: rgba(255, 255, 255, .8);
            transition: color .2s ease;
            font-weight: bold;
        }

        .button-next {
            border-radius: 20px 0 0 20px;
            right: 0;
            text-align: right;
        }

        .pagination {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            z-index: 999;
        }

        .pagination span {
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #d9d9d9;
            margin: 0 5px;
        }

        .pagination span.active {
            background-color: #fff;
        }

        .slide.active {
            z-index: 3;
        }

        .slide.prev {
            z-index: 2;
        }

        .wrapper {
            width: 2360px;


        }
    </style>
</head>

<body>
    <div class="container">

        <div class="wrapper">

            <div class="slide active"><span>0</span><img src="./01.jpeg" alt=""></div>
            <div class="slide prev"><span>1</span><img src="./02.jpeg" alt=""></div>
            <div class="slide"><span>2</span><img src="./03.jpeg" alt=""></div>
            <div class="slide"><span>3</span><img src="./04.jpeg" alt=""></div>
            <div class="slide "><span>0</span><img src="./01.jpeg" alt=""></div>


            <div class="button-next">
                <i class="iconfont icon-xiangyoujiantou"></i>
            </div>

            <div class="button-prev">
                <i class="iconfont icon-xiangzuojiantou"></i>
            </div>

            <div class="pagination">

                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <script src="./Ajax封装.js"></script>


        <script>
            let prev_index = 0;


            let index = 0;


            let button_next = document.querySelector(".button-next");
            let button_prev = document.querySelector(".button-prev");

            let slides = document.querySelectorAll(".slide");

            async function init(){
                getGoodData();
            }
             
            async function getGoodData(){
                let response= await fetch ("https://service-dmsf9bxc-1251395798.gz.apigw.tencentcs.com");
                let data = await response.json();

            }
            window.addEventListener("load", init)






          


            function next() {

                prev_index = index;

                if (index === slides.length - 1) {
                    index = 0;
                } else {
                    index++;
                }

                changeSlide();
            }
            // 切换到上一张功能!
            function prev() {

                prev_index = index;
                if (index === 0) {
                    index = slides.length - 1;
                } else {
                    index--;
                }

                changeSlide();
            }
            button_next.addEventListener("click", next)
            button_prev.addEventListener("click", prev)

                ;
            let spans = document.querySelectorAll(".pagination span");

            function change() {

                let i = indexOf(spans, this);

                if (i === index) {
                    return false;
                }

                prev_index = index;

                index = i;

                changeSlide();
            }


            function indexOf(arr, data) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i] === data) {
                        return i;
                    }
                }
                return -1;
            }

            for (let i = 0; i < spans.length; i++) {
                spans[i].addEventListener("mouseover", change)
            }


            function changeSlide() {

                clearClass();

                if (index === 0 && prev_index === slides.length - 1) {
                    console.log("切换场景")

                    prev_index = index;
                    index++;




                }

                if (prev_index === 0 && index === slides.length - 1) {
                    prev_index = index;
                    index--;


                }
            



                slides[index].classList.add("active")

                slides[prev_index].classList.add("prev");

                if (index === slides.length - 1) {
                    spans[0].classList.add("active");

                } else {

                    spans[index].classList.add("active");
                }

           







            }

            function clearClass() {
                for (let i = 0; i < slides.length; i++) {
                    // 清空全部slide结构的类名
                    slides[i].classList.remove("active");
                    slides[i].classList.remove("prev");
                    // 清除掉按钮部分的active类名; 

                    if (spans[i]) {
                        spans[i].classList.remove("active");

                    }

                }
            }

            /*
            
            function atuoplay() {
                clearInterval(timer);

                timer= setInterval(()=>{

                },1000);







            }

            document,addEventListener('visibilitychange', ()=>{
                if(document.visibilityState === 'hidden'){
                    clearInterval(timer)
                }else{
                    atuoplay()
                }
            })



            let indexw=1;
            */





















        </script>


</body>

</html>